<template>
	<div>
		<h3 id="demo">模板结构</h3>
		<p @click="msg+='-'">{{msg}}</p>
		
		<Myprops v-if="flag" :init="10"></Myprops>
		
		<button @click="destroy"></button>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:'奥运会',
				flag:true
			}
		},
		methods:{
			add(){
				console.log('add')
			},
			destroy(){
				this.flag = false
			}
		},
		//声明周期函数
		//组件创建之前,创建之前不允许使用props data methods
		beforeCreate() {
			console.log("组件创建之前")
			console.log(this.msg)
			//this.add()
		},
		
		//组件创建之后函数,可以使用props data methods
		created() {
			console.log("组件被创建")
			console.log(this.msg)
			this.add()
			//获取模板里的DOM元素
			console.log(document.getElementById("demo"))
		},
		
		beforeMount() {
			//获取模板里的DOM元素
			console.log(document.getElementById("demo"))
		},
		//数据渲染的状态，在这个方法之后才可以操作DOM，因为此时数据才被渲染到页面上，才可以获取DOM
		mounted() {
			//获取模板里的DOM元素
			console.log(document.getElementById("demo"))
		},
		//修改组件数据之前
		beforeUpdate() {
			console.log('update之前')
		},
		updated() {
			console.log('update修改')
		}
	}
</script>

<style>
</style>
